<template>
<!--  ${entity} 主列表-->
    <div>
        <SqTableCard title="筛选搜索" icon-class="el-icon-search">
<!--            卡片按钮-->
            <div slot="buttons">
                <el-button-group>
                    <el-button @click="resetSearch">重置</el-button>
                    <el-button type="primary" @click="getList">查询结果</el-button>
                </el-button-group>
            </div>

<!--            搜索表单-->
            <div>
                <el-row :gutter="10">
                    <#-- ----------  BEGIN 字段循环遍历,搜索表单  ---------->
                    <#list table.fields as field>
                    <el-col :span="6">
                        <div class="search-form-col">
                            ${field.comment}：
                            <#if field.propertyType == "Boolean">
                            <el-switch v-model="searchForm.${field.propertyName}" @change="getList"/>
                            <#else>
                            <el-input
                                    @keyup.enter.native="getList"
                                    v-model="searchForm.${field.propertyName}"
                                    style="width: auto;"
                                    placeholder="请输入..."
                                    clearable />
                            </#if>
                        </div>
                    </el-col>
                    </#list>
                    <#-- ----------  end 字段循环遍历  ---------->
                </el-row>
            </div>
        </SqTableCard>

<!--        表格-->
        <SqTableCard title="数据列表"
                     icon-class="el-icon-tickets"
                     style="margin-top: 20px;"
                     :body-style="{padding: '0'}"
        >
            <div slot="buttons">
                <el-button type="danger" @click="onDelete">删除</el-button>
                <el-button type="primary" @click="onClickAdd">添加</el-button>
            </div>

            <el-table
                    :data="tableData"
                    v-loading="tableLoading"
                    :header-cell-style="{background:'#eef1f6',color:'#606266', textAlign: 'center',}"
                    @selection-change="handleSelectionChange"
                    border
            >
                <el-table-column
                        type="selection"
                        align="center"
                        width="55">
                </el-table-column>

                <#-- ----------  BEGIN 字段循环遍历,表格项  ---------->
                <#list table.fields as field>
                <el-table-column
                        prop="${field.propertyName}"
                        label="${field.comment}"
                        <#if field_has_next>width="100"</#if> >
                    <#if field.propertyType == "Boolean">
                    <template slot-scope="{row}">
                        <el-switch
                                v-model="row.${field.propertyName}" @change="(val)=>onSwitchChange(val, row, '${field.propertyName}')">
                        </el-switch>
                    </template>
                    </#if>
                </el-table-column>
                </#list>
                <#-- ----------  end 字段循环遍历,表格项  ---------->

                <el-table-column
                        fixed="right"
                        label="操作"
                        align="center"
                        width="150">
                    <template slot-scope="{row}">
                        <el-button type="primary" @click="onClickEdit(row)" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>

<!--            分页组件-->
            <SqPaging
                    :page.sync="pageMeta.page"
                    :pageSize.sync="pageMeta.pageSize"
                    :total="pageMeta.total"
                    @sizeChange="getList"
                    @currentChange="getList"
            />
        </SqTableCard>

<!--        添加或修改dialog-->
        <${entity}ListAdd ref="addDialog" @onSaveSuccess="onRefresh"/>
    </div>
</template>

<script>
    import SqTableCard from "@/components/common/SqTableCard";
    import SqPaging from "@/components/common/SqPaging";
    import ${entity}ListAdd from "./${entity}ListAdd";

    export default {
        name: "${entity}List",
        components: {${entity}ListAdd, SqPaging, SqTableCard},
        data() {
            return {
                //搜索表单
                searchForm: {
                    goodsName: null,
                    title: null,
                },
                tableData: [],
                tableLoading: false,
                multipleSelection: [], //选中的行
                //分页参数
                pageMeta: {
                    page: 1,
                    pageSize: 10,
                    total: 0,
                },
            };
        },
        mounted(){
            this.getList();
        },
        methods: {
            /**
             * 获取本页面接口
             **/
            getSelfApi(){
                return this.$apis.admin.${entity?uncap_first};
            },
            /**
             * 刷新表格
             * */
            onRefresh(){
                this.getList();
            },
            /**
             * 获取列表
             * */
            getList(){
                //分页数据
                let {pageMeta: {page, pageSize}}= this;

                //搜索数据
                let searchForm= {...this.searchForm};
                for(let k in searchForm){
                    if(!searchForm[k]){
                        delete searchForm[k];
                    }
                }

                this.tableLoading= true;
                this.getSelfApi().page({
                    page: page,
                    pageSize: pageSize,
                    bean: searchForm,
                }).then(({data})=>{
                    let {total, records} = data;
                    this.tableData= records;
                    this.pageMeta.total= total;
                    this.tableLoading= false;
                }).catch(()=>{
                    this.tableLoading= false;
                });
            },
            /**
             * 点击删除
             * */
            onDelete(){
                let {multipleSelection} = this;
                console.log(multipleSelection, 'on delete');
                if(multipleSelection && multipleSelection.length > 0){
                    let size = multipleSelection.length;
                    <#noparse>
                    this.$confirm(`确认删除${size}条记录？`, '提示').then(()=>{
                    </#noparse>
                        let uuidList = multipleSelection.map(item=> item.uuid);
                        this.getSelfApi().delete({uuid: uuidList.join(',')}).then(()=>{
                            this.$message.success('删除成功');
                            this.onRefresh();
                        });
                    });
                }else{
                    this.$message.warning('请先选择删除的行');
                }
            },
            /**
             * switch 状态值更改
             * @param keyName key值, enable 或者 display
             */
            onSwitchChange(val, row, keyName){
                console.log(val, 'val');
                console.log(row, 'row');
                let bean = {
                    uuid: row.uuid,
                };
                bean[keyName]= val;
                this.getSelfApi().update({bean: bean}).then(()=>{
                    this.$message.success("操作成功");
                }).catch(e=>{
                    row[keyName]= !val;
                });
            },
            /**
             * 处理多行选中
             * */
            handleSelectionChange(val){
                this.multipleSelection= val;
            },
            /**
             * 重置搜索表单
             */
            resetSearch(){
                let {searchForm}= this;
                for(let k in searchForm){
                    this.searchForm[k]= null;
                }
            },
            /**
             * 添加
             */
            onClickAdd(){
                let {addDialog}= this.$refs;
                addDialog.openAdd();
            },
            /**
             * 点击编辑
             */
            onClickEdit(row){
                let {addDialog}= this.$refs;
                addDialog.openEdit(row);
            },
        },
    }

</script>

<style scoped>
    .search-form-col{
        margin-bottom: 8px;
    }
</style>